<template>
  <div class="main" ref="remove">
    <div class="univSearchWrap">
      <div class="univSearBox">
        <div v-show="hasBack"><headerBack></headerBack></div>
        <div class="sers">
          <div class="searchLine flex-h">
            <span class="imgIcon icon_search"></span>
            <div class="flex1">
              <search :auto-fixed="false" :results="results" v-model="searchValue" position="absolute" auto-scroll-to-top top="46px" @on-submit="onSubmit" ref="search"></search>
            </div>
            <div class="clears" @click="clears">
              <span class="imgIcon" v-show="searchValue.length > 0"></span>
            </div>
          </div>
        </div>
      </div>
      <scroller ref="scrollerBottom" :style="hasBack ? 'top: 95px;' : 'top: 46px;'" :on-infinite="handleReachButton" :noDataText="noDataText">
        <div>
          <div v-show="consultationList.length > 0">
            <seek-info :advisories="consultationList"></seek-info>
          </div>
          <div v-show="consultationList.length == 0">
            <div class="noDataImage">
              <img src="~/static/nothing/empty_sousuojieguo.png" alt />
              <div class="describe">{{ desc1 }}</div>
              <div class="describe">{{ desc2 }}</div>
            </div>
          </div>
          <div style="width: 100%;height: 0.92rem;"></div>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
import { academyServicepageList } from '~/api/colleges'
import headerBack from '~/components/headerBack'
import seekInfo from '~/components/seekInfo'
import { getAdvisories } from '~/api/school'
import ls from 'store2'
import { Search } from 'vux'
export default {
  components: {
    Search,
    headerBack,
    seekInfo
  },

  data() {
    return {
      desc1: '',
      desc2: '',
      noDataText: '没有更多学校了~',
      searchs: '',
      results: [],
      searchValue: '',
      consultationList: [],
      hasBack: true,
      currentPage: 1,
      limit: 15
    }
  },
  mounted: function() {
    this.$visit('AcademySearch')
  },
  methods: {
    handleReachButton(done) {
      if (this.currentPage < this.totalPages) {
        this.currentPage = this.currentPage + 1
        getAdvisories(this.currentPage, this.limit, this.$route.query.provincesId, this.searchValue).then(res => {
          let newArr = res.data
          this.consultationList = this.consultationList.concat(newArr)
          this.totalPages = Math.ceil(res.meta.total / this.limit)
          done()
        })
      } else {
        this.noDataText = '没有更多学校了'
        done(true)
        return
      }
    },
    academyServicepageList() {
      this.$loading('open')
      getAdvisories(1, this.limit, this.$route.query.provincesId, this.searchValue)
        .then(res => {
          if (res.meta.total === 0) {
            this.noDataText = ''
            this.consultationList = []
            this.desc1 = '升学小助手正在勤恳为您搜寻资料完善信息～'
            this.desc2 = '请对小助手保持信心'
          } else {
            this.consultationList = res.data
            this.totalPages = Math.ceil(res.meta.total / this.limit)
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    onSubmit() {
      this.currentPage = 1
      this.academyServicepageList()
    },
    clears() {
      this.searchValue = ''
    }
  }
}
</script>
<style lang="less">
.univSearchWrap {
  width: 7.5rem;
  min-height: 100vh;
  background: #fff;
  .univSearBox {
    width: 7.5rem;
    box-sizing: border-box;
    height: auto;
    .sers {
      width: 100%;
      height: auto;
      padding: 0 0.3rem;
      box-sizing: border-box;
    }
    .searchLine {
      width: 100%;
      height: 46px;
      padding-right: 0.3rem;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(238, 238, 238, 1);
      padding-left: 0.08rem;
      .weui-search-bar {
        background-color: none;
        padding: 0;
      }
      .weui-search-bar:before {
        border: none;
        height: 0;
      }
      .weui-search-bar:after {
        border: none;
        height: 0;
      }
      .weui-search-bar__box {
        padding-left: 0.2rem;
      }
      .weui-search-bar__form:after {
        border: none;
        border-radius: 0;
      }
      .weui-search-bar.weui-search-bar_focusing .weui-search-bar__cancel-btn {
        display: none !important;
      }
      .weui-search-bar__box .weui-icon-clear {
        display: none !important;
      }
      .weui-icon-search:before {
        display: none !important;
      }
      .imgIcon {
        display: inline-block;
        width: 0.32rem;
        height: 0.32rem;
      }
      .icon_search {
        background: url('~/static/sprite/other_sprites.png') 0.42rem -0.65rem;
        background-size: 4.68rem 4.08rem;
      }
      .clears {
        width: 0.6rem;
        height: 46px;
        line-height: 46px;
        span {
          background: url('~/static/sprite/other_sprites.png') 0.42rem -0.1rem;
          background-size: 4.68rem 4.08rem;
        }
      }
    }
  }
  .noDataImage {
    text-align: center;
    padding-top: 2.4rem;
    img {
      width: 2.4rem;
      height: 2.4rem;
      margin-bottom: 0.24rem;
    }
    .describe {
      width: 6rem;
      margin: 0 auto;
      color: #999;
      font-size: 0.28rem;
      line-height: 0.4rem;
    }
  }
}
</style>
